<template>
  <div>
  <Row class="btn-action">
    <Col span="24">
      <Button type="primary" class="mp10" @click="chuanSongAction">添加物品记录</Button>
    </Col>
  </Row>
  <div class="opt-area-02">
    <div class="left-con">
      录入总数: <span>{{countData.fcnum}} 条</span>
    </div>
    <div class="right-con">
      <div class="input-frame" style="width: 340px">
        <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="记录时间" v-model="timeArr" style="width: 300px"></DatePicker>
      </div>
      <div class="input-frame">
        <Button class="table-action-btn" type="info" size="small" @click="selectlist()" style="margin-top: 5px">搜索</Button>
      </div>
    </div>
  </div>
  <Table :loading="countData.loading" border :columns="columns4" :data="data4" size="small">
    <template slot="action" slot-scope="{ row }">
<!--      <Button class="table-action-btn" type="info" size="small" @click="showdetail(row, 'info')">详情</Button>-->
      <Button class="table-action-btn" type="success" size="small"
              @click="showdetail(row)">编辑
      </Button>
      <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
    </template>
  </Table>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
          show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <Modal v-model="modal5" title="添加配送记录" @on-ok="ok" @on-cancel="modal5==false">
    <Form :model="formItem" :label-width="120">
      <FormItem label="配送人姓名">
        <Input v-model="formItem.send_name" placeholder="配送人姓名" style="width: 300px"></Input>
      </FormItem>
      <FormItem label="配送人手机号">
        <Input v-model="formItem.send_phone" placeholder="配送人手机号" style="width: 300px"></Input>
      </FormItem>
      <FormItem label="配送人身份证号码">
        <Input v-model="formItem.send_card" placeholder="配送人身份证号码" style="width: 300px"></Input>
      </FormItem>
      <FormItem label="配送物品">
        <Input v-model="formItem.send_goods" placeholder="配送人身份证号码" style="width: 300px"></Input>
      </FormItem>
      <FormItem label="配送时间">
        <Row>
          <Col span="11">
            <DatePicker type="datetime" placeholder="选择时间" v-model="formItem.send_time" style="width: 300px" ></DatePicker>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="配送备注">
        <Input type="textarea" :rows="4" v-model="formItem.remark" placeholder="备注" style="width: 300px"></Input>
      </FormItem>
      <FormItem label="物资图片">
        <img :src="showphoto" style="height: 100px; width: 150px;margin-left: auto"/>
        <Button @click="updatePhoto" style="position:absolute;z-index:100;left:240px;top: 10px"><Icon type="md-camera" />
          <!-- <Icon @click="updatePhoto" type="md-camera" size="40" style="position:absolute;z-index:100;left:340px;top: 10px"/> -->
          点击上传照片</Button>
      </FormItem>
    </Form>
  </Modal>
    <Modal v-model="up_pic_mol" title="图片上传" :closable="false" @on-ok="ok222()" @on-cancel="up_pic_mol=false" ok-text="确定">
      <Upload multiple action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles" :before-upload="beforeUpload">
        <Button icon="ios-cloud-upload-outline">上传图片</Button>
        <span style="margin-left: 250px">请上传小于2M的图片</span>
      </Upload>
      <img :src="temp_photo" style="width: 100%"/>
    </Modal>
  </div>
</template>
<script>
import nophoto from '@/assets/images/nophoto.jpeg'
import { createUpLoadFiles, getSign } from '@/api/common'
import { date0str, getSendGoodsByUidList, insertSendGoods, updateSendGoods, deleteSendGoods } from '@/api/yi-qing-fang-kong'
export default {
  name: 'MaterialDistribution',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      timeArr: [],
      temp_photo: '',
      PhotoModal: false,
      upPicData: {
        fileName: '',
        filePath: ''
      },
      paramData: {},
      modal5: false,
      formItem: {},
      up_pic_mol: false,
      userInfo: { photo: nophoto },
      showphoto: nophoto,
      columns4: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '配送人姓名', key: 'send_name', align: 'center' },
        { title: '配送人手机号', key: 'send_phone', align: 'center' },
        { title: '配送人身份证号', key: 'send_card', align: 'center' },
        { title: '配送物品', key: 'send_goods', align: 'center' },
        { title: '配送时间', key: 'send_time', align: 'center' },
        { title: '备注', key: 'remark', align: 'center' },
        { title: '操作', align: 'center', width: 250, slot: 'action' }
      ],
      data4: [],
      params: { name: '', type: '', pageNo: 1, pageSize: 10, totalRecord: 0, state: '', uid: this.id },
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 }
    }
  },
  methods: {
    beforeUpload (file) {
      this.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: obj.filePath, fileName: obj.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              let imgurl = res.data.data
              this.temp_photo = imgurl
              this.showphoto = imgurl
              this.userInfo.photo = imgurl
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    init () {
      getSendGoodsByUidList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.data4 = res.data.data.results
        }
      })
    },
    updatePhoto (item) {
      this.paramData = item
      this.up_pic_mol = true
      this.PhotoModal = false
    },
    ok () {
      this.formItem.send_time = date0str(this.formItem.send_time)
      this.formItem.uid = this.id
      if (this.formItem.id) {
        updateSendGoods(this.formItem).then(res => {
          if (res.data.errcode === 0) {
            this.init()
            this.$Notice.success({ title: '成功', desc: '' })
            this.showphoto = this.userInfo.photo
          } else {
            this.$Notice.error({ title: '失败', desc: '' })
          }
        })
      } else {
        insertSendGoods(this.formItem).then(res => {
          if (res.data.errcode === 0) {
            this.init()
            this.$Notice.success({ title: '成功', desc: '' })
            this.showphoto = this.userInfo.photo
          } else {
            this.$Notice.error({ title: '失败', desc: '' })
          }
        })
      }
    },
    showdetail (row) {
      // 编辑
      this.modal5 = true
      this.formItem.id = row.id
      this.formItem.send_name = row.send_name || ''
      this.formItem.send_phone = row.send_phone || ''
      this.formItem.send_card = row.send_card || ''
      this.formItem.send_goods = row.send_goods || ''
      this.formItem.send_time = row.send_time || ''
      this.formItem.remark = row.remark || ''
      this.formItem.send_time = date0str(this.formItem.send_time)
      this.showphoto = row.send_goods_img
    },
    ok222 () {
      this.formItem.send_goods_img = this.temp_photo
    },
    chuanSongAction () {
      this.modal5 = true
      this.showphoto = this.userInfo.photo
    },
    selectlist (type) {
      console.log(this.timeArr)
      this.formItem.starttime = date0str(this.timeArr[0])
      this.formItem.endtime = date0str(this.timeArr[1])
      this.params.pageNo = 1
      console.log(this.params, 'rucan')
      // this.params.measure_time = date0str(this.params.measure_time)
      this.init()
    },
    deleteRow (item) {
      deleteSendGoods(item).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.$Notice.success({ title: ' 删除成功', desc: '' })
        } else {
          this.init()
          this.$Notice.error({ title: ' 删除失败', desc: '' })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      // this.params.type = this.tab_index
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo, this.params.type)
    }
  },
  mounted () {
    this.init()
    console.log(this.id, 'pppppppppppppppp')
  }
}
</script>
<style>
  .page_style {
    margin: 20px 5px;
  }

  .input-frame {
    width: 120px;
    margin-right: 10px;
  }

  .house-list > .group {
    background: white;
    padding: 10px;
    margin-top: 10px;
  }

  .house-list > .group > .item {
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0;
  }

  .house-list > .group > .item .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .house-list > .group > .item .title {
    font-size: 14px;
    color: #333333;
  }

  .house-list > .group > .item .address {
    font-size: 12px;
    color: gray;
    display: flex;
    align-items: center;
  }

  .house-list > .group > .item .detail {
    font-size: 12px;
    color: dodgerblue;
  }

  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }

  .opt-area-02 .left-con span {
    font-weight: bold;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }

  .table-action-btn {
    margin-right: 3px;
  }

  .container >>> .ivu-btn-small {
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 3px;
  }

  .btn-action {
    margin-bottom: 10px;
  }

  .mp10 {
    margin-right: 10px;
  }
</style>
